<template>
  <view>
    <view style="background-color: #fff;">
      <u-field
        label="品牌"
        v-model="door.BrandName"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <u-picker
        mode="selector"
        v-model="showBrandPicker"
        :range="brandList"
        range-key="Value"
        @confirm="handleBrandChange"
        @cancel="showBrandPicker = false"
      ></u-picker>
      <u-field
        label="门店地址"
        :disabled="true"
        input-align="right"
        :value="areaText.join('-')"
        @click="showAreaPicker = true"
      />

      <u-picker
        mode="multiSelector"
        v-model="showAreaPicker"
        :range="areaList"
        range-key="Name"
        :default-selector="areaDefaultSelector"
        @confirm="handleAreaChange"
        @cancel="showAreaPicker = false"
        @columnchange="handleAreaColumnChange"
      ></u-picker>

      <u-field
        label="门店名称"
        :disabled="true"
        input-align="right"
        v-model="door.DoorDealerName"
        @click="showDoorPicker = true"
      ></u-field>

      <u-picker
        mode="selector"
        v-model="showDoorPicker"
        :range="doorList"
        range-key="Name"
        @confirm="handleDoorChange"
        @cancel="showDoorPicker = false"
      ></u-picker>

      <u-field label="客户姓名" :arrow="false" v-model="door.NickName" :disabled="true" input-align="right"></u-field>
      <u-field label="联系电话" :arrow="false" v-model="door.Phone" :disabled="true" input-align="right"></u-field>
    </view>

    <view v-if="showApproval" style="padding: 0 24rpx;background-color: #fff;margin-top: 40rpx; ">
      <u-form :model="{}" label-position="top">
        <u-form-item label="审核备注"><u-input v-model="approval.remark" /></u-form-item>
      </u-form>
    </view>

    <view v-if="showApproval" class="fixed-btn">
      <u-button :loading="btnLoading" style="flex: 1;" @click="handleApproval(2)">驳回</u-button>
      <u-button :loading="btnLoading" type="warning" style="flex: 1;" @click="handleApproval(1)">通过</u-button>
    </view>

    <view v-else class="fixed-btn">
      <u-button
        @click="
          $u.route({
            type: 'back'
          })
        "
        style="flex: 1;"
      >
        返回列表
      </u-button>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      door: {},

      approval: {
        detailId: '',
        // 1.审核通过 2.驳回
        auditstate: '',
        remark: '',
        // 门店详细
        DoorDetail: {}
      },

      btnLoading: false,
      showApproval: false,

      brandList: [],
      showBrandPicker: false,

      ProviceList: [],
      CityList: [],
      DistrictList: [],

      areaDefaultSelector: [0, 0, 0],

      areaList: [],
      showAreaPicker: false,

      areaText: [],

      showDoorPicker: false,
      doorList: []
    };
  },

  onLoad(options) {
    console.log(options);
    if (options.Id) {
      this.getDetail(options.Id);
      this.approval.detailId = options.Id;
    }
    if (options.showApproval && options.showApproval == 'true') {
      this.showApproval = true;
    } else {
      uni.setNavigationBarTitle({
        title: '门店申请详情'
      });
    }

    this.getBrandList();
    this.getAreaList();
  },

  methods: {
    handleBrandChange(e) {
      const index = e[0];
      const brand = this.brandList[index];

      this.door.BrandId = brand.Key;
      this.door.BrandName = brand.Value;

      this.getDoorList(brand.Key);
    },

    handleAreaChange(e) {
      const provinceIndex = e[0];
      const cityIndex = e[1];
      const districtIndex = e[2];

      const province = this.areaList[0][provinceIndex];
      const city = this.areaList[1][cityIndex];
      const district = this.areaList[2][districtIndex];

      this.door.ProvinceId = province.Id;
      this.door.CityId = city.Id;
      this.door.DistrictId = district.Id;

      this.areaText = [province.Name, city.Name, district.Name];
      this.areaDefaultSelector = e;

      this.getDoorList(this.door.BrandId, province.Id);
    },

    handleAreaColumnChange({ column, index }) {
      if (column == 0) {
        this.resetAreaList({ pIndex: index });
        this.areaDefaultSelector[0] = index;
      }
      if (column == 1) {
        this.resetAreaList({ cIndex: index });
        this.areaDefaultSelector[1] = index;
      }
      if (column == 2) {
        this.areaDefaultSelector[2] = index;
      }
    },

    handleDoorChange(e) {
      let index = e[0];
      const door = this.doorList[index];

      if (door) {
        this.door.DoorDealerName = door.Name;
        this.door.DoorDealerId = door.DealerId;
        this.door.NickName = door.NickName;
        this.door.Phone = door.Mobile;
      } else {
        this.door.DoorDealerName = searchText.value;
        this.door.DoorDealerId = 0;
        this.door.NickName = '';
        this.door.Phone = '';
      }
    },

    getDetail(id) {
      this.$u
        .post('/Api/MF_ManagerFront/MF_ChannelDealer/PostDoorDetail', {
          detailId: id
        })
        .then(res => {
          console.log(res);
          const { DoorDetail, ProvinceModel, CityModel, DistrictModel } = res;
          if (DoorDetail) {
            this.door = DoorDetail;
            this.door.DoorDealerName = DoorDetail.DoorName;

            const d = DistrictModel.find(item => item.AreaId == DoorDetail.DistrictId);

            this.areaText = [DoorDetail.ProvinceName, DoorDetail.CityName, d.Name];
          }
        });
    },

    getAreaList() {
      this.$u.post('/Api/MF_ManagerFront/MF_ChannelDealer/PostAreaList').then(res => {
        const { PList, CList, DList } = res;

        this.ProviceList = PList;
        this.CityList = CList;
        this.DistrictList = DList;

        const p0 = PList[0];
        const c_list = CList.filter(item => item.ParentId == p0.Id);
        const c0 = c_list[0];
        const d_list = DList.filter(item => item.ParentId == c0.Id);

        this.areaList = [PList, c_list, d_list];

        this.resetAreaList({ pIndex: 0 });
      });
    },

    resetAreaList({ pIndex, cIndex }) {
      if (pIndex != undefined) {
        let p = this.ProviceList[pIndex];
        const c_list = this.CityList.filter(item => item.ParentId == p.Id);

        let c = c_list[0];
        const d_list = this.DistrictList.filter(item => item.ParentId == c.Id);

        this.areaList = [this.ProviceList, c_list, d_list];
      }

      if (cIndex != undefined) {
        let c_list = this.areaList[1];
        let c = c_list[cIndex];
        const d_list = this.DistrictList.filter(item => item.ParentId == c.Id);
        this.areaList = [this.ProviceList, c_list, d_list];
      }
    },

    getBrandList() {
      this.$u.post('/Api/MF_ManagerFront/MF_ChannelDealer/PostSelectBrand').then(res => {
        this.brandList = res.BrandList;
      });
    },

    getDoorList(brandId, provinceId = undefined) {
      this.$u
        .post('/Api/MF_ManagerFront/MF_ChannelDealer/PostDoorPageSelectDoorList', {
          BrandId: brandId,
          ProvinceId: provinceId
        })
        .then(res => {
          this.doorList = res.DoorList;
        });
    },

    handleApproval(state) {
      let me = this;
      this.approval.DoorDetail = this.door;
      this.approval.auditstate = state;

      if (state == 2) {
        if (!this.approval.remark) {
          me.$refs.uToast.show({
            title: '请填写审核备注'
          });
          return;
        }
      }

      console.log(this.approval);

      this.btnLoading = true;

      this.$u
        .post('/Api/MF_ManagerFront/MF_ChannelDealer/PostDoorAudit', this.approval)
        .then(res => {
          const { ResultMessage } = res;

          me.$refs.uToast.show({
            title: ResultMessage,
            url: '/pages/review/index',
            isTab: true
          });
        })
        .finally(() => {
          this.btnLoading = false;
        });
    }
  }
};
</script>

<style>
page {
  background-color: #f5f5f5;
  padding: 24rpx;
}

.fixed-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: 40rpx;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
</style>
